<!-- 展览页 -->
<template>
    <div>
            <app-head></app-head> <!-- 引入头部组件 -->
            <div class="carousel-wrapper" style="margin-top: 80px;"> <!-- 添加顶部外边距 -->
                <Carousel></Carousel> <!-- 引入轮播组件 -->
            </div>
        <app-body> <!-- 引入主体内容组件 -->
            <div style="min-height: 100vh;"> <!-- 设置最小高度为视窗高度的85% -->
                <el-tabs v-model="labelName" type="card" @tab-click="handleClick"> <!-- 使用element-ui的标签页组件，并绑定v-model和@tab-click事件监听 -->
                    <el-tab-pane label="全部" name="0"></el-tab-pane> <!-- 创建一个标签页，标签名为“全部”，值为"0" -->
                    <el-tab-pane v-for="item in typeList" :key="item.id" :label="item.name" :name="item.id + ''"></el-tab-pane> <!-- 根据typeList数组动态创建多个标签页 -->
                </el-tabs>
                <div style="margin: 0 20px;">
                    <el-row :gutter="30"> <!-- 使用element-ui的栅格布局组件，并设置列之间的间隔为30 -->
                        <el-col :span="6" v-for="(idle, index) in idleList" :key="index"> <!-- 根据idleList数组动态创建多个列，每列宽度占六分之一 -->
                            <div class="idle-card" @click="toDetails(idle)"> <!-- 空闲物品卡片，点击事件跳转到详情页 -->
                                <el-image style="width: 100%; height: 160px" :src="$store.state.baseApi + idle.imgUrl" fit="contain"> <!-- 显示图片 -->
                                    <div slot="error" class="image-slot"> <!-- 图片加载失败时的替代内容 -->
                                        <i class="el-icon-picture-outline">无图</i>
                                    </div>
                                </el-image>
                                <div class="idle-title">
                                    {{ idle.idleName }} <!-- 显示空闲物品名称 -->
                                </div>
                                <el-row style="margin: 5px 10px;">
                                    <el-col :span="12">
                                        <div class="idle-prive">￥{{ idle.idlePrice }}</div> <!-- 显示空闲物品价格 -->
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="idle-num">销量:{{ idle.idleNum }}</div>
                                    </el-col>

                                    <el-col :span="12">
                                        <div class="idle-place">{{ idle.idlePlace }}</div> <!-- 显示空闲物品地点 -->
                                    </el-col>
                                </el-row>
                                <div class="user-info" v-if="idle.user"> <!-- 如果存在用户信息，则显示用户头像和昵称 -->
                                    <el-image style="width: 30px; height: 30px"
                                        :src="$store.state.baseApi + idle.user.avatar" fit="contain">
                                        <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline">无图</i>
                                        </div>
                                    </el-image>
                                    <div class="user-nickname">{{ idle.user.nickname }}</div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="fenye">
                    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
                        :page-size="8" layout="prev, pager, next, jumper" :total="totalItem">
                    </el-pagination> <!-- 分页组件，监听页码改变事件，显示当前页数和总条目数 -->
                </div>
            </div>
        </app-body>
        <app-foot></app-foot> <!-- 引入页脚组件 -->
    </div>
</template>


<script>
import AppHead from '../common/AppMeHeader.vue';
import AppBody from '../common/AppPageBody.vue'
import AppFoot from '../common/AppFoot.vue'
import Carousel from '../common/Carousel.vue';

export default {
    name: "index",
    components: {
        AppHead,
        Carousel,
        AppBody,
        AppFoot
    },
    data() {
        return {
            // 物品分类
            labelName: '0',
            // 空闲列表
            idleList: [],
            // 当前页码
            currentPage: 1,
            // 总条目数
            totalItem: 1,
            // 类型列表
            typeList: [],
        };
    },
    /**
     * 组件创建完成后执行的函数
     */
    created() {
        // 调用 findIdleTiem 方法，并传入参数 1
        this.findIdleTiem(1)

        // 调用 $api.listType 方法，传入参数 { begin: 0, size: 999 }
        // 在返回结果后，将结果赋值给 this.typeList
        this.$api.listType({ begin: 0, size: 999 }).then((res) => {
            this.typeList = res.data;
        })
    },
    watch: {
        /**
         * Vue 路由导航守卫函数
         *
         * @param to 路由即将进入的目标路由对象
         * @param from 当前导航正要离开的路由
         */
        $route(to, from) {
            // 将查询参数中的labelName赋值给this.labelName
            this.labelName = to.query.labelName;
            // 尝试将查询参数中的page转换为整数，如果转换失败则默认为1
            let val = parseInt(to.query.page) ? parseInt(to.query.page) : 1;

            // val=val===0?totalPage:val;

            // 将处理后的页码赋值给this.currentPage
            this.currentPage = parseInt(to.query.page) ? parseInt(to.query.page) : 1;
            // 调用findIdleTiem方法，传入处理后的页码val作为参数
            this.findIdleTiem(val);
        }
    },
    methods: {
        findIdleTiem(page) {
            const loading = this.$loading({
                lock: true,
                text: '加载数据中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0)'
            });
            if (this.labelName > 0) {
                this.$api.findIdleTiemByLable({
                    idleLabel: this.labelName,
                    page: page,
                    nums: 8
                }).then(res => {
                    console.log(res);
                    let list = res.data.list;
                    for (let i = 0; i < list.length; i++) {
                        list[i].timeStr = list[i].releaseTime.substring(0, 10) + " " + list[i].releaseTime.substring(11, 19);
                        let pictureList = JSON.parse(list[i].pictureList);
                        list[i].imgUrl = pictureList.length > 0 ? pictureList[0] : '';
                    }
                    this.idleList = list;
                    this.totalItem = res.data.count;
                    console.log(this.totalItem);
                }).catch(e => {
                    console.log(e);
                }).finally(() => {
                    loading.close();
                })
            } else {
                this.$api.findIdleTiem({
                    page: page,
                    nums: 8
                }).then(res => {
                    console.log(res);
                    let list = res.data.list;
                    for (let i = 0; i < list.length; i++) {
                        list[i].timeStr = list[i].releaseTime.substring(0, 10) + " " + list[i].releaseTime.substring(11, 19);
                        let pictureList = JSON.parse(list[i].pictureList);
                        list[i].imgUrl = pictureList.length > 0 ? pictureList[0] : '';
                    }
                    this.idleList = list;
                    this.totalItem = res.data.count;
                    console.log(this.totalItem);
                }).catch(e => {
                    console.log(e);
                    if (
                        e.response == undefined ||
                        e.response.data == undefined
                    ) {
                        this.$message({
                            showClose: true,
                            message: e,
                            type: "error",
                            duration: 20000,
                        });
                    } else {
                        this.$message({
                            showClose: true,
                            message: e.response.data,
                            type: "error",
                            duration: 20000,
                        });
                    }
                }).finally(() => {
                    loading.close();
                })
            }
        },
        handleClick(tab, event) {

            // 打印当前组件的labelName属性值
            console.log(this.labelName);
            // 使用路由替换方法，更新查询参数，并设置当前页面为第一页，同时将labelName属性值作为查询参数传递
            this.$router.replace({ query: { page: 1, labelName: this.labelName } });
        },
        /**
         * 处理当前页改变事件
         *
         * @param val 当前页码
         */
        handleCurrentChange(val) {
            // 输出当前页信息
            console.log(`当前页: ${val}`);
            // 使用 Vue Router 的 replace 方法更新路由，将查询参数 page 和 labelName 设置为新的值
            this.$router.replace({ query: { page: val, labelName: this.labelName } });
        },
        toDetails(idle) {
            this.$router.push({ path: '/details', query: { id: idle.id } });
        }
    }
}
</script>

<style scoped>
.idle-card {
    height: 300px;
    border: #eeeeee solid 1px;
    margin-bottom: 15px;
    cursor: pointer;
}

.fenye {
    display: flex;
    justify-content: center;
    height: 60px;
    align-items: center;
}

.idle-title {
    font-size: 18px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 10px;
}

.idle-prive {
    font-size: 16px;
    color: red;
}

.idle-place {
    font-size: 13px;
    color: #666666;
    float: right;
    padding-right: 20px;

}

.idle-time {
    color: #666666;
    font-size: 12px;
    margin: 0 10px;
}

.user-nickname {
    color: #999999;
    font-size: 12px;
    display: flex;
    align-items: center;
    height: 30px;
    padding-left: 10px;
}

.user-info {
    margin-top: 10px;
    float: right;
    padding: 5px 10px;
    height: 30px;
    display: flex;
}
</style>